<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function sendAjax(){
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:8080/springmvc/ajax2',
                dataType:'json',
                success:function (res) {
                    console.log(res);
                }
            })
        }

        function sendPost(){
            var data = {
                id:1001,
                username:'小跃跃',
                password:'123',
                age:20
            }

            // var data = [1,3,7]

            // var data = [
            //     {
            //         id:1001,
            //         username:'tom',
            //         password:'123',
            //         age:20
            //     },
            //     {
            //         id:1002,
            //         username:'jack',
            //         password:'123',
            //         age:20
            //     },
            //     {
            //         id:1003,
            //         username:'alice',
            //         password:'123',
            //         age:20
            //     }
            // ]

            // var data = {
            //     id:1001
            // }

            $.ajax({
                type:'post',
                url:'param6',
                contentType:'application/json;charset=utf-8', // 数据为json格式
                data:JSON.stringify(data),
                dataType:'json',
                success:function (res) {
                    console.log(res);
                }
            })
        }

        function sendPath(){
            $.ajax({
                type:'get',
                url:'path/path2/101/tom',
                dataType:'json',
                success:function (res) {
                    console.log(res);
                }
            })
        }

        function doUpload(){
            // 文件上传时必须将数据封装为FormData对象
            var formData = new FormData();
            formData.append('name',$('#name').val());
            formData.append('avatar',$('#avatar')[0].files[0])

            $.ajax({
                type:'post',
                url:'upload',
                data:formData,
                contentType:false, // 不设置内容类型
                processData:false, // 不处理数据
                success:function (res) {
                    console.log(res);
                }
            })
        }
    </script>
</head>
<body>
  <!--静态资源处理-->
  <img src="imgs/turtle.png" width="200px">
  <hr>

  <!--跨域请求-->
  <button onclick="sendAjax()">发送请求</button>
  <hr>

  <!--post请求-->
  <button onclick="sendPost()">发送post请求</button>

  <button onclick="sendPath()">发送请求</button>
  <hr>

  <!--文件上传-->
  <form id="formUpload">
      姓名：<input type="text" id="name"> <br>
      头像：<input type="file" id="avatar"> <br>
      <input type="button" value="提交" onclick="doUpload()">
  </form>
</body>
</html>